<template>
  <div class="box">
    <div class="boxList" v-for="(v, i) in arr" :key="i">
      <div class="list-left">
        <img :src="v.goodsImg" alt="" />
      </div>
      <div class="list-right">
        <p class="tie">{{ v.goodsName }}</p>
        <!-- <p class="depict">{{ goods1.gdesc }}</p> -->
        <p class="top" :v-model="wa">
          <img src="../assets/imgs/goodsList/toplogo.png" alt="" />
          {{wa}}
        </p>
        <p class="price">
          <span>{{ v.goodsPrice }}</span>
        </p>
      </div>
      <div class="list-1">
        <!-- <img src="../assets/imgs/goodsList/sot1.png" alt="" /> -->
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Cons",
  data: function () {
    return {
      arr: [],
      wa:'热销产品'
    };
  },
  created() {
    axios({
      url: "/api/xiaomipro/goods/goods1",
      method: "get", //可以不写 默认get
    }).then((res) => {
      let arr = [];
      console.log(res.data.goods[0].second[0].third);
      let a = res.data.goods[0].second[0].third;
      for (let i = 0; i < a.length; i++) {
        // console.log(a[i].goodsName)
        if (a[i].goodsName.indexOf("新人专享") == -1) {
          arr.push(res.data.goods[0].second[0].third[i]);
        }
      }
      this.arr = arr;
    });
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  background-color: #021937;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 商品模块 */
.box .boxList {
  width: 94%;
  height: 70%;
  background: linear-gradient(to bottom, #fff, 10%, #fffbeb 50%);
  margin-bottom: 0.06rem;
  border-radius: 0.06rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* 商品左侧 */
.boxList .list-left {
  width: 30%;
  height: 70%;
}
.boxList .list-left img {
  width: 100%;
  height: 100%;
}
/* 商品右侧 */
.boxList .list-right {
  width: 62%;
  height: 1.32rem;
  padding: 0.09rem 0.06rem 0rem 0.06rem;
  box-sizing: border-box;
}
.boxList .list-1 {
  position: absolute;
  width: 6%;
  height: 8%;
  left: 1.3%;
  top: 0rem;
}
.boxList .list-1 img {
  width: 100%;
}
.list-right .tie {
  font-size: 0.15rem;
  font-weight: bold;
}
.list-right .depict {
  font-size: 0.11rem;
  border: 0.01rem solid #f6edd5;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0.04rem 0;
  color: #7d4402;
}
.list-right .top {
  width: 1.11rem;
  height: 0.17rem;
  background-color: #fdedd6;
  color: #7d4402;
  font-size: 0.11rem;
  margin: 0.15rem 0;
}
.list-right .top img {
  height: 100%;
  vertical-align: middle;
  margin-right: 0.04rem;
}
.list-right .price {
  margin-top: 0.05rem;
  font-size: 0.14rem;
  color: #fe2624;
  font-weight: bold;
}
.list-right .price span {
  font-size: 0.2rem;
  font-weight: bold;
}
</style>
